<template>
  <!-- 滚动视图：包裹整个页面，支持垂直滚动 -->
  <scroll-view scroll-y="true" class="scroll-container">
    <!-- 1. 顶部轮播图（自动轮播、循环播放、显示指示器） -->
    <view class="swiper-box">
      <swiper autoplay interval="3000" circular indicator-dots>
        <swiper-item>
          <image src="/static/images/city1.jpg" mode="widthFix" />
        </swiper-item>
        <swiper-item>
          <image src="/static/images/city2.jpg" mode="widthFix" />
        </swiper-item>
        <swiper-item>
          <image src="/static/images/city3.jpg" mode="widthFix" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 城市介绍（富文本，带格式） -->
    <view class="intro-box">
      <text class="title">泉州介绍</text>
      <rich-text :nodes="cityIntro"></rich-text>
    </view>

    <!-- 3. 探索进度（进度条，显示60%） -->
    <view class="progress-box">
      <text class="title">探索进度</text>
      <progress percent="60" show-info />
    </view>

    <!-- 4. 城市选择（省市区三级联动选择器） -->
    <view class="picker-box">
      <text class="title">选择城市</text>
      <picker 
        mode="multiSelector" 
        :range="cityRange" 
        @change="handleCityChange" 
        @columnchange="handleColumnChange" 
        :value="cityValue"
      >
        <view class="picker-text">当前选择: {{ currentCity }}</view>
      </picker>
    </view>

    <!-- 5. 偏好设置（出行方式radio + 推荐景点switch + 探索半径slider） -->
    <view class="setting-box">
      <text class="title">偏好设置</text>
      <!-- 出行方式 -->
      <view class="radio-group">
        <text>出行方式：</text>
        <radio-group @change="handleTravelChange">
          <radio value="bus" checked>公交</radio>
          <radio value="drive">自驾</radio>
          <radio value="walk">步行</radio>
        </radio-group>
      </view>
      <!-- 显示推荐景点 -->
      <view class="switch-group">
        <text>显示推荐景点：</text>
        <switch :checked="showRecommend" @change="handleRecommendChange" />
      </view>
      <!-- 探索半径 -->
      <view class="slider-group">
        <text>探索半径: {{ radius }}km</text>
        <slider :value="radius" @change="handleRadiusChange" min="1" max="50" />
      </view>
    </view>

    <!-- 6. 媒体展示（城市宣传视频） -->
    <view class="video-box">
      <text class="title">泉州宣传</text>
      <video src="/static/video/quanzhou.mp4" controls></video>
    </view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      // 富文本城市介绍（含加粗、换行、分段等格式）
      cityIntro: `
        <h3>海上丝绸之路起点 - 泉州</h3>
        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</p>
        <p><strong>著名景点：</strong>清源山、开元寺、泉州南禅寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>
      `,

      // 省市区三级联动数据（示例）
      cityRange: [
        ["福建省", "广东省"],
        ["泉州市", "福州市", "广州市", "深圳市"],
        ["丰泽区", "鲤城区", "鼓楼区", "天河区", "南山区"]
      ],
      cityValue: [0, 0, 0], // 默认选中：福建省-泉州市-丰泽区
      currentCity: "福建省 - 泉州市 - 丰泽区",

      // 偏好设置数据
      travelType: "bus",   // 默认出行方式：公交
      showRecommend: true, // 默认显示推荐景点
      radius: 10           // 默认探索半径：10km
    };
  },
  methods: {
    // 城市选择变化（三级联动确认选择）
    handleCityChange(e) {
      const [provinceIdx, cityIdx, districtIdx] = e.detail.value;
      const province = this.cityRange[0][provinceIdx];
      const city = this.cityRange[1][cityIdx];
      const district = this.cityRange[2][districtIdx];
      this.currentCity = `${province} - ${city} - ${district}`;
      this.cityValue = [provinceIdx, cityIdx, districtIdx];
    },

    // 城市选择列变化（三级联动列切换，可扩展更细粒度联动）
    handleColumnChange(e) {
      console.log("列切换事件：", e); // 可根据需求扩展联动逻辑
    },

    // 出行方式变化
    handleTravelChange(e) {
      this.travelType = e.detail.value;
    },

    // 显示推荐景点开关变化
    handleRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },

    // 探索半径滑块变化
    handleRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>
<style scoped>
/* 滚动容器：占满视口高度，支持垂直滚动 */
.scroll-container {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx;
}

/* 通用标题样式 */
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin: 20rpx 0;
  display: block;
}

/* 轮播图容器 */
.swiper-box swiper {
  height: 300rpx; /* 轮播图高度，可自定义 */
}
.swiper-box image {
  width: 100%;
  height: 100%;
}

/* 各模块间距 */
.intro-box, .progress-box, .picker-box, .setting-box, .video-box {
  margin-bottom: 30rpx;
}

/* 视频容器 */
.video-box video {
  width: 100%;
  height: 400rpx; /* 视频高度，可自定义 */
}

/* 偏好设置内部布局 */
.radio-group, .switch-group, .slider-group {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
}
.radio-group radio, .switch-group switch {
  margin: 0 10rpx;
}
.slider-group slider {
  flex: 1;
  margin: 0 20rpx;
}
</style>